<template>
  <navigator
    :url="`/pages/categoryDetail/index?classid=${props.id}`"
    open-type="navigate"
    hover-class="navigator-hover"
    class="category-item"
  >
    <u-image
      width="100%"
      height="320rpx"
      :src="props.src"
      shape="square"
      border-radius="20rpx"
      mode="aspectFill"
    >
      <template #loading>
        <u-loading></u-loading> 
        </template>
      <template #error>
  <view style="font-size: 24rpx;">加载失败</view>
</template>
      </u-image>
    <view class="tag">
      {{ props.updateDate }}前更新
    </view>
    <view class="mask">
      <text>{{ props.title }}</text>
    </view>
  </navigator>
</template>

<script setup>
  const props = defineProps({
    src: {
      type: String,
      default: '/static/image/classify1.jpg',
    },
    title: {
      type: String,
      default: '专题分类',
    },
    id: {
      type: String,
      default: '',
    },
    updateDate: {
      type: [Number, String],
      default: 1,
    },
  });
</script>

<style scoped lang="scss">
  .category-item {
    position: relative;
    width: 100%;
    height: 360rpx;
    overflow: hidden;
    border-radius: 20rpx;

    navigator {
      display: block;
      width: 100%;
      height: 100%;
    }

    .tag {
      position: absolute;
      top: 16rpx;
      left: 16rpx;
      background: #fc9962;
      color: #fff;
      font-size: 22rpx;
      padding: 6rpx 12rpx;
      border-radius: 12rpx;
      z-index: 2;
    }

    .mask {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 20%;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(6rpx);
      -webkit-backdrop-filter: blur(6rpx);
      display: flex;
      align-items: flex-end;
      padding: 20rpx;
      z-index: 10;

      text {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        color: #fff;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 1.2;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
      }
    }
  }
</style>
